<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Highcharts Example</title>

		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		<script type="text/javascript">
var chart;
$(document).ready(function() {
	chart = new Highcharts.Chart({
		chart: {
			renderTo: 'container',
			defaultSeriesType: 'spline'
		},
		title: {
			text: 'Monthly Average Temperature'
		},
		subtitle: {
			text: 'Source: WorldClimate.com'
		},
		xAxis: {
			categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
				'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
		},
		yAxis: {
			title: {
				text: 'Temperature'
			},
			labels: {
				formatter: function() {
					return this.value +'°'
				}
			}
		},
		tooltip: {
			crosshairs: true,
			shared: true
		},
		plotOptions: {
			spline: {
				marker: {
					radius: 4,
					lineColor: '#666666',
					lineWidth: 1
				}
			}
		},
		series: [{
			name: 'Tokyo',
			marker: {
				symbol: 'square'
			},
			data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, {
				y: 26.5,
				marker: {
					symbol: 'url(../../graphics/sun.png)'
				}
			}, 23.3, 18.3, 13.9, 9.6]

		}, {
			name: 'London',
			marker: {
				symbol: 'diamond'
			},
			data: [{
				y: 3.9,
				marker: {
					symbol: 'url(../../graphics/snow.png)'
				}
			}, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
		}]
	});
});

		</script>
	</head>
	<body>
<script type="text/javascript" src="../../js/highcharts.js"></script>
<script type="text/javascript" src="../../js/modules/exporting.js"></script>

<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>

	</body>
</html>
